$(function(){
    var currentPage = 1; //记录当前页 
    var pageSize = 5; // 一页五条数据
    // 首页渲染
    function render(){
        $.ajax({
            type:"get",
            url:"/user/queryUser",
            data:{
                page:currentPage,
                pageSize:pageSize,
            },
            dataType:"json",
            success:function(res){
            console.log(res);
            // 渲染
            $('tbody').html(template('tmp', res));
             // res.total 数据库数据真实的总数 
            setPage(res.total);
            }
        })
    }
    render();

    // 2- 禁用启用功能
  // 1 - 点击 禁用 / 启用按钮， 弹出模态框， 获取当前数据的id， 获取要进行操作
  var id=null;
  var isDelate=null;
  $("tbody").on("click",".btn-exec",function(){
    // 获取当前数据的id
    // data() jquery 提供 用于获取 date-开头的自定义属性  data('name')
     id=$(this).parent().data("id");
    //  获取要进行操作 1启用 0禁用
    isDelate=$(this).hasClass("btn-success")?1:0;
    console.log(isDelate)
  });

  // 2 - 用户点击确定操作按钮，向后台发送请求，根据id对用户进行禁用获取启用
  // 3 - 后台操作完成后，前端重新渲染，看到操作结果
  $(".btn-ok").on("click",function(){
    $.ajax({
        type: 'post',
        url: '/user/updateUser',
        data: {
          id: id,
          isDelete: isDelate
        },
        dataType: 'json',
        success: function (res) {
          console.log(res);
          render(); //重新渲染 
          $('.modal-user').modal('hide'); //隐藏模态框
        }
      })
  });

   // 3- 分页功能 
  // 1- 分页按钮的个数，由后台数据库数据的总数决定！  生成分页之前要先获取数据库数据的总数 
  // 2- 根据总数 生成分页按钮， 实现点击切换页面功能  
  //    页码 = Math.ceil(数据总数 / 每页条数); 
  //    使用插件 生成分页按钮， 切换页面；   
  // 封装一个生成分页的方法 
   // total: 表示 数据库数据总数 
   function setPage (total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,// 默认高亮的分页按钮 
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮对应的页码
        console.log('page:', page);
        // 改变当前页取值
        currentPage = page;
        // 重新渲染 
        render();
      }
    });
  }
})